<template>
    <div class="box">
      <el-button type="primary" @click="visible = true">开始引导</el-button>

      <el-button ref="btn1" type="warning" class="step1">步骤一步骤一步骤一</el-button>
      <h1 v-for="i in 100" :key="i">{{ i }}</h1>
      <el-button ref="btn2" type="warning" class="step2">步骤二步骤二步骤二步骤二步骤二步骤二步骤二步骤二步骤二步骤二</el-button>
      <h1 v-for="i in 300" :key="i">{{ i }}</h1>
      <el-button ref="btn3" type="warning" class="step3">步骤三</el-button>
      <h1 v-for="i in 100" :key="i">{{ i }}</h1>

      <V3Guide v-model="visible" :steps="steps" placement="rightTop">
        <!-- <template #header>
          你好
        </template> -->
      </V3Guide>
    </div>
</template>


<script setup>
import { V3Guide } from '/publish/package/index'
// import { V3Guide } from 'v3-guide'
import { ref, reactive, onMounted } from 'vue'
import { StepA, StepB, StepC } from '@/components/TourTest'
// ==========================================================
const visible = ref(false)
const btn1 = ref()
const btn2 = ref()
const btn3 = ref()
const steps = ref([])

onMounted(() => {
  steps.value = [
    {
      el: btn1.value.$el,
      vnode: StepA,
    },
    {
      el: btn2.value.$el,
      vnode: StepB,
    },
    {
      el: btn3.value.$el,
      vnode: StepC,
    }
  ]
})
</script>

<style lang="scss">
#app {
  padding: 20px;
  box-sizing: border-box;
  // background: #222;
}

.box {
  padding-inline: 400px;
}
</style>
